<template>
  <div class="section clearfix">
    <el-row>
      <el-col :span="3" style="margin-right: 3%">
        <div class="custom-tree-container">
          <div class="block">
            <ul>
              <li
                v-for="(item, index) in data"
                :key="index"
                :class="{ bg: index == isactive }"
                @click="selectRole(item, index)"
              >
                {{ item.roleName }}
              </li>
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :span="19">
        <div v-show="isShow">
          <div class="haeder">
            <p>功能区：</p>
            <el-button
              type="primary"
              style="float:left;margin-top:15px;margin-left:10px"
              size="small"
              round
              @click="openDialog"
              v-no-more-click
              >添加新角色</el-button
            >
            <el-button
              type="primary"
              style="float:left;margin-top:15px;margin-left:10px"
              size="small"
              round
              @click="permissionsDialog"
              v-no-more-click
              >添加新权限</el-button
            >
          </div>
          <div class="body">
            <p style="margin-bottom: 10px">
              *全部权限功能均可控制指定的页面菜单、按钮、链接、操作等，保证权限对操作的控制
            </p>
            <p>一、大数据平台</p>
            <el-row>
              <el-col :span="23">
                <el-tree
                  id="tree"
                  ref="treeMenu"
                  :data="datatree"
                  node-key="id"
                  show-checkbox
                  :props="defaultProps"
                  default-expand-all
                  :default-checked-keys="defaultIsd"
                  :check-strictly="checkStrictly"
                  :render-content="renderContent"
                >
                </el-tree>
              </el-col>
            </el-row>
            <div style="text-align:center">
              <el-button
                type="primary"
                @click="updateRolePerm"
                v-if="roleUpdateRolePermBtn"
                v-no-more-click
                >提交</el-button
              >
            </div>
            <p style="margin-top: 10px">二、录单小程序</p>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      title="角色管理"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
      :show-close="false"
      :close-on-press-escape="false"
    >
      <RoleDialog
        :dialogVisible="dialogVisible"
        v-if="dialogVisible"
        v-on:dialogVisible="closeDialog($event)"
        @getRoleList="getRoleList"
      ></RoleDialog>
    </el-dialog>
    <!-- 添加新权限-->
    <el-dialog
      :title="RoleTitle"
      :visible.sync="dialog"
      v-if="dialog"
      width="45%"
    >
      <RolePermissions
        :dialog="dialog"
        @RoleTitle="showMsg"
        v-on:dialog="closeDialog($event)"
      ></RolePermissions>
    </el-dialog>
  </div>
</template>

<script type="text/jsx">
import RoleDialog from "../../components/system/RoleDialog";
import RolePermissions from "../../components/system/RolePermissions";
import { checkPermiss } from "../../assets/js/utlis";
import {
  getRoleList,
  getMenuList,
  getRolePerm,
  updateRolePerm
} from "../../../src/assets/js/api";

export default {
  name: "Role",
  components: { RoleDialog, RolePermissions },
  data() {
    return {
      //默认选中的选项
      defaultIsd: [],
      RoleTitle: "新增权限",
      //即将提交的id
      ids: [],
      checkList: [],
      checkStrictly: true,
      isShow: false,
      dialogVisible: false,
      dialog: false,
      isactive: null,
      data: [],
      roleID: null,
      defaultProps: {
        children: "children",
        label: "label"
      },
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
        num: "1"
      },
      datatree: [],
      count: 1
    };
  },
  created() {
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
    this.getRoleList();
  },
  updated() {
    this.changeTreeClass();
  },
  computed: {
    // 角色授权
    roleUpdateRolePermBtn: function() {
      return checkPermiss("sys:role:updateRolePerm", this.golbalPermissions);
    }
  },
  methods: {
    showMsg(val) {
      this.RoleTitle = val;
    },
    //获取菜单
    getMenuList(id) {
      getMenuList().then(res => {
        //let that = this;
        this.datatree = res.data;
        this.getRolePerm(id);
        // window.setTimeout(function() {
        //   that.changeTreeClass();
        // }, 1);
      });
    },
    //获取角色列表
    getRoleList() {
      getRoleList().then(res => {
        this.data = res.data;
      });
    },
    //选择角色
    selectRole(item, index) {
      this.isactive = index;
      this.isShow = true;
      this.roleID = item.id;
      this.defaultIsd = null;
      this.getMenuList(item.id);
    },
    //根据角色id获取权限
    getRolePerm(id) {
      getRolePerm(id).then(res => {
        this.defaultIsd = res.data;
      });
    },
    //根据角色Id修改权限ID
    updateRolePerm() {
      this.$emit("getMessage", "true");
      let halt = this.$refs.treeMenu.getHalfCheckedKeys();
      let idkey = this.$refs.treeMenu.getCheckedKeys();
      this.ids = idkey.concat(halt);
      updateRolePerm({ roleId: this.roleID, perms: this.ids }).then(res => {
        this.$message.success(res.message);
        this.$emit("getMessage", "false");
      });
    },
    closeDialog(msg) {
      this.dialogVisible = msg;
      this.dialog = msg;
    },
    renderContent(h, { data }) {
      let className = "";
      if (data.children == null) {
        className = "especially";
      }
      return <div class={className}>{data.label}</div>;
    },
    // 改变tree节点样式
    changeTreeClass() {
      // 找到之前做标记的class
      // var classDomList = document.getElementsByClassName("especially");
      // // 改变这几个样式
      // for (var i = 0; i < classDomList.length; i++) {
      //   classDomList[i].parentNode.className =
      //     "el-tree-node_content00 option-wrapper";
      //   classDomList[i].parentNode.parentNode.parentNode.style.marginLeft =
      //     "70px";
      // }
      this.$(".especially")
        .closest(".el-tree-node")
        .css({ width: "20%", float: "left" });
      this.$(".especially")
        .closest(".el-tree-node__children")
        .parent()
        .css({ width: "100%", clear: "both" });
      this.$(".especially")
        .closest(".el-tree-node__children")
        .parent()
        .parent()
        .parent()
        .css({ width: "100%", clear: "both" });
    },
    openDialog() {
      this.dialogVisible = true;
    },
    //  添加权限按钮操作
    permissionsDialog() {
      this.dialog = true;
    }
  }
};
</script>

<style type="less">
.option-wrapper {
  padding-left: 0 !important;
  float: left;
  display: flex;
}
.block {
  height: 400px;
  box-shadow: 0 0 10px rgb(193, 193, 193);
  overflow: auto;
}
.block li {
  cursor: pointer;
}
.bg {
  background: #409eff;
  color: #fff;
}
.haeder {
  background-color: rgb(241, 243, 244);
  width: 100%;
  height: 60px;
  overflow: hidden;
  padding-left: 20px;
  line-height: 30px;
}

.haeder p {
  float: left;
  height: 30px;
  line-height: 30px;
  margin-top: 15px;
}
.body {
  box-shadow: 0px 0px 10px rgb(193, 193, 193);
  width: 100%;
  padding: 20px 0 50px 20px;
  margin-top: 30px;
  text-align: left;
  font-size: 14px;
}
u:hover {
  cursor: pointer;
}
/* #tree .el-tree-node__children .el-tree-node .el-tree-node__children {
  display: block;
  width: 100%;
  white-space: unset;
  display: flex;
  flex-wrap: wrap;
}
#tree
  .el-tree-node__children
  .el-tree-node
  .el-tree-node__children
  .el-tree-node {
  display: inline-block;
  width: 20%;
  overflow: hidden;
} */
/* #tree
  :first-child
  .el-tree-node__children
  .el-tree-node
  .el-tree-node__children {
  display: block;
  width: 100%; */
/* white-space: unset;
  display: flex;
  flex-wrap: wrap; */
/* } */
/* #tree
  :first-child
  .el-tree-node__children
  .el-tree-node
  .el-tree-node__children
  .el-tree-node {
  width: 100%;
  float: left;
} */
/* #tree
  .el-tree-node__children
  .el-tree-node
  .el-tree-node__children
  .el-tree-node
  .el-tree-node__children {
  display: block;
  width: 100%;
  white-space: unset;
  display: flex;
  flex-wrap: wrap;
}
#tree
  .el-tree-node__children
  .el-tree-node
  .el-tree-node__children
  .el-tree-node
  .el-tree-node__children
  .el-tree-node {
  display: inline-block;
  width: 20%;
} */
</style>
